<template>
	<div class="goods">
		<div class="tab">
			<van-skeleton class="tab-skeleton" row="6" :loading="isTabLoading">
				<van-tabs v-model="active" animated swipeable @click="tabChange" @change="tabChange">
					<van-tab v-for="(item, index) in list" :title="item.title" :key="index" :name="item.id">
						<van-pull-refresh v-model="isRefresh" @refresh="onRefresh(item)">
							<van-list
								v-model="item.loading"
								:finished="item.finished"
								finished-text="没有更多了"
								:error.sync="item.error"
								@load="loadMore(item, '', index)"
							>
								<!--活动专题-->
								<!-- <special ref="special" v-if="index === 0"></special> -->

								<!--渲染商品列表-->
								<div class="goods-list" v-if="item.goodsList.length > 0">
									<div class="goods-wrap" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="'goods' + goodsIndex">
										<goods-item :item="goodsItem" @success="getUrl" @openDig="openDig" @error="errorDid"></goods-item>
									</div>
								</div>

								<!--骨架屏-->
								<div class="skeleton-wrap" v-for="i in 3" :key="'i' + i">
									<van-skeleton
										:row-width="['100%', '70%', '30%', '60%']"
										avatar
										avatar-size="140px"
										avatar-shape="square"
										:row="4"
										:loading="item.loading"
									></van-skeleton>
								</div>

								<!--空数据展示-->
								<div slot="error">
									<empty emptyText="暂无商品" offsetTop="50"></empty>
								</div>
							</van-list>
						</van-pull-refresh>
					</van-tab>
				</van-tabs>
			</van-skeleton>

			<!--骨架屏-->
			<div class="skeleton-wrap" v-for="i in 3" :key="'i' + i">
				<van-skeleton
					:row-width="['100%', '70%', '30%', '60%']"
					avatar
					avatar-size="140px"
					avatar-shape="square"
					:row="4"
					:loading="isTabLoading"
				></van-skeleton>
			</div>
		</div>
		<JdLoadingDig ref="jdDig"></JdLoadingDig>
	</div>
</template>

<script>
import { Tab, Tabs, List, Skeleton, PullRefresh } from 'vant';
import { Empty } from '@/components';
import GoodsItem from '@/components/jd/GoodsItem';
import JdLoadingDig from '@/components/jd/JdLoadingDig';

// import Special from './Special';

export default {
	name: 'GoodsList',
	components: {
		'van-tab': Tab,
		'van-tabs': Tabs,
		'van-list': List,
		'van-skeleton': Skeleton,
		'van-pull-refresh': PullRefresh,
		'goods-item': GoodsItem,
		// Special,
		Empty,
		JdLoadingDig
	},
	data() {
		return {
			isTabLoading: true,
			active: 0,
			isRefresh: false,
			list: [
				{
					cid: '0',
					title: '精选',
					loading: false,
					finished: false,
					error: false,
					goodsList: [],
					page: 1
				}
			],
			params: {
				page: 1,
				size: 20,
				cid1: ''
			}
		};
	},
	created() {
		// 获取一级分类
		this.getClassifyList();
	},
	watch: {
		active(val) {
			// 百度推送
			let item = this.list.filter(item => item.cid == val);
			if (item[0]) {
				if (item[0].title === '推荐') {
					this.$baiduPush('首页点击事件', 'tap', '进入首页');
				} else {
					this.$baiduPush('首页点击事件', 'tap', item[0].title);
				}
			}
		}
	},
	methods: {
		// 获取一级分类列表
		getClassifyList() {
			// 获取一级分类
			this.isTabLoading = true;
			this.$service.jd.goods.category().then(res => {
				res.forEach(item => {
					item.title = item.name;
					item.loading = false;
					item.finished = false;
					item.error = false;
					item.goodsList = [];
					item.page = 1;
				});
				this.list = this.list.concat(res);
				this.isTabLoading = false;
			});
		},
		// 异步加载数据
		loadMore(item, operate) {
			if (Number(item.id) === 0) {
				this.params.cid1 = '';
			} else {
				this.params.cid1 = item.id;
			}
			this.params.page = item.page;
			this.$service.jd.goods.page(this.params).then(res => {
				item.goodsList = item.goodsList.concat(res.list);

				// 加载状态结束
				item.loading = false;
				item.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 暂无数据
				if (item.goodsList.length === 0) {
					item.page = 1;
					item.error = true;
				} else if (item.goodsList.length >= res.pagination.total) {
					// 数据全部加载完成
					item.finished = true;
				}
			});
		},
		// 下拉刷新
		onRefresh(item) {
			item.error = false;
			item.goodsList = [];
			item.loading = true;
			item.finished = false;
			item.page = 1;
			this.loadMore(item, 'refresh');
		},
		// tab切换还原page
		tabChange() {
			document.getElementById('container').scrollTop = 0;
		},
		openDig() {
			this.$refs['jdDig'].open();
		},
		errorDid() {
			setTimeout(() => {
				this.$refs['jdDig'].hide();
			}, 500);
		},
		getUrl(e) {
			setTimeout(() => {
				this.$refs['jdDig'].hide();
				location.href = e;
			}, 500);
		}
	}
};
</script>

<style lang="scss" scoped>
.goods {
	.tab-skeleton {
		background: $color-white;
		padding: 10px;
		.van-skeleton__content {
			display: flex;
			justify-content: space-between;
			.van-skeleton__row {
				margin-top: 0;
				height: 70px;
				border-radius: 8px;
				width: 15% !important;
			}
		}
	}
	.van-list {
		min-height: 650px;
		.goods-list {
			padding: 0 14px;
			margin-top: 20px;
			.goods-wrap {
				padding: 16px;
				background: $color-white;
				border-radius: 16px;
				margin-bottom: 20px;
			}
		}
	}
	.skeleton-wrap {
		padding: 0 20px;
		margin-top: 20px;
		.van-skeleton {
			padding: 16px;
			background: $color-white;
			border-radius: 16px;
			.van-skeleton__avatar {
				width: 37% !important;
				height: 0 !important;
				padding-bottom: 37%;
				border-radius: 8px;
			}
			.van-skeleton__content {
				padding-top: 0;
				@include flexBox(space-between, null, column);
				.van-skeleton__row {
					border-radius: 8px;
				}
			}
		}
	}
}
/deep/.van-tabs {
	.van-tabs__wrap {
		position: sticky;
		top: 64px;
		z-index: 99;
		background: white;
	}
	.van-tabs__content {
		box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.16);
	}
}
</style>
